<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{ site.title }}</title>
    {{include 'components/import'}}
    <script src="/javascripts/validator.min.js"></script>
    <script src="/javascripts/liteuploader.js"></script>
    <script src="/javascripts/promise.min.js"></script>
</head>

<body>
    <!-- {{include 'components/site-nav'}} -->
    {{include 'components/header'}}
    <div class="container-fluid form-con" id="publish">
      <h2><strong class="container">免费发布信息</strong></h2>
      <ol class="step container">
        <li class="active">
          <i>1</i>
          <strong>选择类型</strong>
        </li>
        <li>
          <i>2</i>
          <strong>选择区域</strong>
        </li>
        <li>
          <i>3</i>
          <strong>详细信息</strong>
        </li>
      </ol>
      <div class="container type">
        <p>请选择您发布信息的类型：</p>
        <div class="con">
          <div class="item">
            <h4><input type="radio" name="type-sel" id="type-01"/><label for="type-01">商铺转让</label></h4>
          </div>
          <div class="item">
            <h4><input type="radio" name="type-sel" id="type-02"/><label for="type-02">商铺求租</label></h4>
          </div>
        </div>
        <div class="main-do">
            <button type="submit" class="btn btn-theme" id="nextStep1">下一步</button>
        </div>
      </div>

      <div class="container area">
        <div class="selected">
          <span class="select-type">商铺转让</span>
          <!-- <span>摊位柜台</span> -->
        </div>
        <p>请选择您发布商铺所在区域：</p>
        <div class="item">
          <h4>行政区</h4>
          <div class="con area-container"></div>

          <div class="subArea">
              <div class="con">
                <h5>商圈:</h5>
              </div>
          </div>
        </div>

        <div class="item">
          <h4>地铁线</h4>
          <div class="con subway-container"></div>

          <div class="subStation">
              <div class="con">
                <h5>站点:</h5>
              </div>
          </div>
        </div>

        <div class="main-do">
            <button type="submit" class="btn btn-match" id="preStep2">上一步</button>
            <button type="submit" class="btn btn-theme" id="nextStep2">下一步</button>
        </div>
      </div>

      <div class="container more">
        <div class="selected">
          <span class="select-type"></span>
          <span class="select-area"></span>
        </div>

        <form class="form-horizontal" id="moreinfoForm">
          <div class="form-group">
            <label for="more-info-title" class="col-sm-3 control-label">信息标题：</label>
            <div class="col-sm-6">
              <div class="input-group">
                <span class="input-group-addon more-info-type"></span>
                <input type="text" class="form-control" id="more-info-title" placeholder="信息标题" required>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="more-info-category" class="col-sm-3 control-label">所属行业：</label>
            <div class="col-sm-3">
              <select id="more-info-category" class="form-control" placeholder="地标性说明" required>
                <option>选择行业</option>
                <option value="酒楼餐饮">酒楼餐饮</option>
                <option value="美容美发">美容美发</option>
                <option value="服饰鞋包">服饰鞋包</option>
                <option value="专柜转让">专柜转让</option>
                <option value="休闲娱乐">休闲娱乐</option>
                <option value="百货超市">百货超市</option>
                <option value="生活服务">生活服务</option>
                <option value="电子通讯">电子通讯</option>
                <option value="汽修美容">汽修美容</option>
                <option value="医药保健">医药保健</option>
                <option value="家居建材">家居建材</option>
                <option value="教育培训">教育培训</option>
                <option value="旅馆宾馆">旅馆宾馆</option>
                <option value="公司工厂">公司工厂</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-3 control-label">商铺类型：</label>
            <div class="col-sm-3">
              <select id="more-info-estate-type" class="form-control" required>
                <option>选择类型</option>
                <option value="商业街商铺">商业街商铺</option>
                <option value="市场类商铺">市场类商铺</option>
                <option value="社区商铺">社区商铺</option>
                <option value="住宅底商">住宅底商</option>
                <option value="百货商场、购物中心商铺">百货商场、购物中心商铺</option>
                <option value="商务楼、写字楼商铺">商务楼、写字楼商铺</option>
                <option value="交通设施商铺">交通设施商铺</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="more-info-address" class="col-sm-3 control-label">商铺地址：</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="more-info-address" placeholder="地标性说明" required>
            </div>
            <div class="col-sm-6 col-sm-offset-3">
              <span class="tip">地标性说明，如苏宁广场东侧、淮海路与中山南路路口...</span>
            </div>
          </div>
          <div class="form-group">
            <label for="more-info-empty" class="col-xs-4 col-sm-3 control-label">商铺性质：</label>
            <div class="col-sm-2">
              <label class="radio-inline">
                <input  type="checkbox" id="more-info-empty"> 可空转
              </label>
            </div>
            <div class="col-sm-2">
              <label class="radio-inline">
                <input  type="checkbox" id="more-info-operating"> 营业中
              </label>
            </div>
          </div>
          <hr/>
          <div class="form-group more-info-attorn">
            <label for="more-info-area-size" class="col-xs-4 col-sm-3 control-label">商铺面积：</label>
            <div class="col-xs-8 col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-area-size" placeholder="0">
                <span class="input-group-addon">m<sup>2</sup></span>
              </div>
            </div>
          </div>

          <div class="form-group more-info-seeklease">
            <label for="more-info-area-size" class="col-xs-4 col-sm-3 control-label">商铺面积范围：</label>
            <div class="col-xs-8 col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-area-size2" placeholder="最小面积">
                <span class="input-group-addon">m<sup>2</sup></span>
              </div>
            </div>
            <div class="col-xs-8 col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-area-size3" placeholder="最大面积">
                <span class="input-group-addon">m<sup>2</sup></span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="more-info-rent" class="col-xs-4 col-sm-3 control-label more-info-attorn">商铺租金：</label>
            <!-- 求租时切换 -->
            <label for="more-info-rent" class="col-xs-4 col-sm-3 control-label more-info-seeklease">商铺租金上限：</label>
            <div class="col-xs-8 col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-rent" placeholder="0" required>
                <span class="input-group-addon">元/月</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="more-info-rent" class="col-xs-4 col-sm-3 control-label more-info-attorn">物业费：</label>
            <!-- 求租时切换 -->
            <label for="more-info-rent" class="col-xs-4 col-sm-3 control-label more-info-seeklease">物业费上限：</label>
            <div class="col-xs-8 col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-property-fee" placeholder="0" required>
                <span class="input-group-addon">元/月</span>
              </div>
            </div>
          </div>
          <div class="form-group more-info-attorn">
            <label for="more-info-bargaining-checkbox" class="col-xs-4 col-sm-3 control-label">转让费：</label>
            <div class="col-xs-8 col-sm-6 line">
              <label class="radio-inline">
                <input name="empty-2" type="checkbox" id="more-info-bargaining-checkbox" value="option1"> 可面议
              </label>
            </div>
            <div class="col-sm-3 col-sm-offset-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-transfer-fee" placeholder="0">
                <span class="input-group-addon">万元</span>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="input-group">
                <span class="input-group-addon">±</span>
                <input type="number" class="form-control" id="more-info-transfer-scope" placeholder="0">
                <span class="input-group-addon">万元</span>
              </div>
            </div>
          </div>
          <div class="form-group more-info-seeklease">
            <label for="more-info-transfer-fee2" class="col-xs-4 col-sm-3 control-label">转让费上限：</label>
            <div class="col-sm-3">
              <div class="input-group">
                <input type="number" class="form-control" id="more-info-transfer-fee2" placeholder="0">
                <span class="input-group-addon">万元</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="more-info-desc" class="col-sm-3 control-label">详细介绍：</label>
            <div class="col-sm-6">
              <textarea class="form-control" rows="8" id="more-info-desc" placeholder="请输入300字以内的文字介绍" required></textarea>
            </div>
          </div>
          <div class="form-group more-info-attorn">
            <label for="more-info-desc" class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-6">
              <ul class="list-inline" id="moreinfoImagesWrap">
                <li class="add">
                  <div class="fileinput fileinput-new" data-provides="fileinput">
                    <span class="btn btn-default btn-file btn-sm"><span class="fileinput-new"><i class="fa fa-plus"></i></span>
                    <!-- <input id="cpp_image_pics" type="file" name="images" multiple="multiple" accept="image/png,image/gif,image/jpg,image/jpeg"/></span> -->
                    <input id="cpp_image_pics" type="file" name="fileUpload[]" multiple class="fileUpload" accept="image/png,image/gif,image/jpg,image/jpeg" />
                    <!--<span class="fileinput-filename"></span>
                    <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>-->
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-sm-6 col-sm-offset-3">
              <span class="tip">您可上传最少1张，最多6张图片，尺寸：600*450px，默认第一张为封面图片。</span>
            </div>
          </div>
          <hr/>
          <div class="form-group">
            <label for="identity" class="col-xs-4 col-sm-3 control-label">您的身份：</label>
            <div class="col-xs-8 col-sm-6">
              <label class="radio-inline">
                <input name="identity" type="radio" id="identity-proprietor" value="option1"> 业主
              </label>
              <label class="radio-inline">
                <input name="identity" type="radio" id="identity-landlord" value="option1"> 房东
              </label>
              <label class="radio-inline">
                <input name="identity" type="radio" id="identity-intermediary" value="option1"> 中介
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="more-info-default-contact" class="col-xs-4 col-sm-3 control-label">联系方式：</label>
            <!-- <div class="col-xs-8 col-sm-6 line">
              <label class="radio-inline">
                <input name="contact" type="checkbox" id="more-info-default-contact" value="option1"> 默认方式
              </label>
            </div> -->
            <!-- <div class="col-sm-3 col-sm-offset-3"> -->
            <div class="col-sm-3">
              <div class="input-group">
                <input type="text" class="form-control" id="more-info-contact-name" placeholder="联系人" required>
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><label id="more-info-select-gender-label">先生</label> <span class="caret"></span></button>
                  <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="javascript:moreInfoSelectGender('female')">女士</a></li>
                    <li><a href="javascript:moreInfoSelectGender('male')">先生</a></li>
                  </ul>
                </div><!-- /btn-group -->
              </div><!-- /input-group -->
            </div>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="more-info-contact-phone" placeholder="手机或固话" required>
            </div>
          </div>
        </form>

        <div class="main-do">
            <button type="submit" class="btn btn-match" id="preStep3">上一步</button>
            <button type="submit" class="btn btn-theme" id="confirmStep">确认发布</button>
        </div>
      </div>


      <div class="container finish">
        <div class="con">
          <i class="fa fa-check-circle"></i>
          <strong>您的信息已发布成功！</strong>
          <p id="finish-title-tip">
            <a href="javascripts:;"><strong class="more-info-type"></strong></a>
            <small>No.4518455</small>
          </p>
          <button type="submit" class="btn btn-theme" id="continuePublish">继续发布信息</button>
          <button type="submit" class="btn btn-theme" id="infoCenter">个人中心</button>
        </div>
      </div>

    </div>


    {{include 'components/footer'}}

    <script src="/javascripts/vendor.js"></script>
    <script src="/javascripts/publish.js"></script>
</body>

</html>
